<template>
  <u-form ref="form" :model="form" class="login-form" label-width="0" @submit="onSubmit">
	<!-- <u-form-item label="手机号"><u-input v-model="form.mobile" /></u-form-item>
	<u-form-item label="验证码"><u-input v-model="form.smsCode" /></u-form-item> -->
    <form-field name="手机号">
      <u-field
        v-model="form.mobile"
        name="mobile"
        type="tel"
        class="is-active-highlight"
        :class="{ 'is-active': !!form.mobile }"
        maxlength="11"
        :rules="rules.mobile"
        placeholder="请输入手机号"
        @click-right-icon="form.mobile = ''"
      >
        <template #right-icon>
          <i class="clear-field-icon" />
        </template>
      </u-field>
    </form-field>
    <form-field name="验证码">
      <u-field
        ref="smsCode"
        v-model="form.smsCode"
        name="smsCode"
        class="is-active-highlight"
        :class="{ 'is-active': !!form.smsCode }"
        placeholder="请输入验证码"
        :rules="rules.smsCode"
      >
        <template #button>
          <u-button
            class="login-captcha-btn"
            size="small"
            type="primary"
            native-type="button"
            :disabled="disabledCaptcha"
            round
            plain
            @click="onSendCaptcha"
          >
            {{ curCountdownText }}
          </u-button>
        </template>
      </u-field>
    </form-field>
    <!-- <u-field class="login-protocol" :error-message="error.protocol ? '请阅读用户协议' : ''">
      <user-protocol slot="input" v-model="form.protocol" />
    </u-field> -->
    <u-button class="login-submit" round block type="info">{{ btnText }}</u-button>
  </u-form>
</template>

<script>
  import FormField from '@components/modules/login/form-field';
  import UserProtocol from '@components/modules/login/user-protocol/index';
  import { phone } from '@common/pattern';
  import { phoneSms } from '@api/common/system';
  import { getUrlParams } from '@common/utils';

  export default {
    components: { FormField, UserProtocol },
    props: {
      btnText: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        form: {
          userName: '',
          password: '',
          mobile: '',
          smsCode: '',
          protocol: false
        },
        rules: {
          userName: [{ required: true, message: '请填写用户名' }],
          password: [{ required: true, message: '请填写密码' }],
          mobile: [
            { required: true, message: '请填写手机号' },
            { required: true, message: '格式不正确', pattern: phone }
          ],
          smsCode: [{ required: true, message: '请填写验证码' }],
          protocol: [{ required: true, message: '' }]
        },
        error: {
          protocol: false
        },
        disabledCaptcha: false,
        totalCountdown: 60,
        curCountdown: null,
        timeoutID: null
      };
    },
    computed: {
      curCountdownText() {
        const { curCountdown } = this;
        if (curCountdown === null) return '发送';

        return curCountdown;
      }
    },
    beforeDestroy() {
      this.curCountdown = null;
      clearTimeout(this.timeoutID);
    },
    methods: {
      onSendCaptcha() {
        const { placeId } = getUrlParams();
        const { mobile } = this.form;

        this.$refs.form
          .validate('mobile')
          .then(() => {
            this.disabledCaptcha = true;

            phoneSms({ placeId, mobile }).then(({ success, msg, data }) => {
              this.$toast(msg);
              if (!success) return (this.disabledCaptcha = false);

              this.curCountdown = data;
              this.runCaptchaCountdown();
            });
          })
          .catch(() => {});
      },
      runCaptchaCountdown() {
        this.timeoutID = setTimeout(() => {
          this.curCountdown--;

          if (this.curCountdown <= -1) {
            this.curCountdown = null;
            this.disabledCaptcha = false;
          } else if (this.curCountdown > -1) this.runCaptchaCountdown();
        }, 1000);
      },
      onSubmit() {
        const { protocol } = this.form;

        this.error.protocol = !protocol;

        if (!protocol) return false;

        this.$emit('success-valid', this.form);
      }
    }
  };
</script>
